<template>
	<view class="home-overview">
		<view class="overview-mod">
			<view class="mod-cover">
				<view class="mod-title">
					直饮机主参数
				</view>
				<view class="ov-cell">
					<text class="cell-tit">累计用水量</text>
					<text class="cell-num">{{device.water_nums}}</text>
					<text class="cell-unit">升</text>
				</view>
				<view class="ov-cell" v-if="device.dtype == 1">
					<text class="cell-tit">剩余用水量</text>
					<text class="cell-num">{{device.last_water_nums}}</text>
					<text class="cell-unit">升</text>
				</view>
				<view class="ov-cell">
					<text class="cell-tit">设备ID</text>
					<text class="cell-ntxt">{{device.device_id}}</text>
				</view>
				<view class="ov-cell">
					<text class="cell-tit">设备状态</text>
					<text class="cell-ntxt">在线</text>
				</view>
			</view>
			<view class="mod-img">
				<image class="img" src="/static/images/home-overview-img.png" mode="aspectFill"></image>
			</view>
		</view>
		
		<view class="alarm-mod" v-if="lists.length > 0">
			<!-- <view class="item-icon">
				<u-icon name="jingbao" custom-prefix="xin-icon" ></u-icon>
			</view> -->
			<view class="item-body">
				<u-notice-bar mode="horizontal" type="none" :list="lists" font-size="24" padding="16rpx 24rpx" volume-size="32"></u-notice-bar>
			</view>
			<view class="item-foot" @click="$Router.push('/pages/user/wallet/recharge')"  v-if="showPay">去充值</view>
		</view>
		
		<view class="monitor-mod">
			<view class="monitor-view">
				<view class="monitor-cell">
					<view class="monitor-item">
						<view class="item-head">
							<view class="item-icon icon-bg-blue" >
								<u-icon name="shuidi" custom-prefix="xin-icon"></u-icon>
							</view>
						</view>
						<view class="item-body">
							<view class="item-lab">原水TDS值</view>
							<view class="item-num">{{device.ys_tds}}</view>
						</view>
					</view>
				</view>
				<view class="monitor-cell">
					<view class="monitor-item">
						<view class="item-head">
							<view class="item-icon icon-bg-yellow" >
								<u-icon name="yuanzhu" custom-prefix="xin-icon" ></u-icon>
							</view>
						</view>
						<view class="item-body">
							<view class="item-lab">纯水TDS值</view>
							<view class="item-num">{{device.cs_tds}}</view>
						</view>
					</view>
				</view>
				<view class="monitor-cell">
					<view class="monitor-item">
						<view class="item-head">
							<view class="item-icon icon-bg-green" >
								<u-icon name="wave" custom-prefix="xin-icon"></u-icon>
							</view>
						</view>
						<view class="item-body">
							<view class="item-lab">矿化水TDS值</view>
							<view class="item-num">{{device.khs_tds}}</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			lists: [],
			showPay:0
		};
	},
	options: { styleIsolation: 'shared' },
	props: {
		device:{
			type:Object,
			default:function(){
				return {};
			}
		}
	},
	 
	computed: {},
	created() {
		this.getAlaram();
	},
	methods: {
		jump(path,param){
			this.$Router.push({
				path:path,
				query:param
			});
		},
		getAlaram(){
			this.$get("api/device/getAlarm",{device_id:this.device.device_id}).then(res => {
				console.log("device",this.device.device_id);
				if(res.data.paynotice != ''){
					this.lists.push(res.data.paynotice);
					this.showPay = 1;
				}
				else{
					this.showPay = 0;
				}
				if(res.data.errornotice != ''){
					this.lists.push(res.data.errornotice);
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	 .home-overview{
		 margin-top: 12upx;
	 }
	 .overview-mod{
		 position: relative;
		 display: flex;
		 align-items: center;
		 height: 320upx;
		 line-height: 1.2;
		 color: #fff;
		 border-radius: 20upx 20upx 0 0;
		 background: linear-gradient(to bottom,rgb(69,161,255) 0%, rgb(67,124,253) 100%);
		    
		 .mod-cover{
			 position: relative;
			 z-index: 10;
			 padding:36upx 24upx;
		 }
		 .mod-title{
			 font-size: 34upx;
			 margin-bottom: 16upx;
		 }
		 .ov-cell{
			 position: relative;
			 padding:10upx 0;
			 font-size: 32upx;
			 
			 &::after{
				 content: " ";
				 position: absolute;
				 left: 0;
				 right: 0;
				 bottom: 0;
				 height: 1px;
				 background-color: rgba($color: #fff, $alpha: .8);
				 transform: scaleY(.5);
			 }
			 
			 &:last-child::after{
				 display: none;
			 }
			 .cell-tit{
				font-size: 26upx;
				margin-right: 20upx;
			 }
			 .cell-num{
				  
			 }
			 .cell-unit{
				 margin-left: 12upx;
			 }
			 .cell-ntxt{
				 font-size:28upx;
			 }
		 }
		 .mod-img{
			 position: absolute;
			 left: 0;
			 top: 0;
			 height: 100%;
			 width: 100%;
			 z-index: 1;
			 pointer-events: none;
			 .img{
				  width: 100%;
				  height: 100%;
			 }
		 }
	 }
	 .alarm-mod{
		 display: flex;
		 align-items: center;
		 // padding:16upx 24upx;
		 font-size: 24upx;
		 line-height: 1.4;
		 color: #fe3b3b;
		 background-color: #f9eeee;
		 animation: alarm-ani 3s linear infinite;
		 .item-icon{
			 margin-right: 12upx;
			 font-size: 32upx;
			 line-height: 1;
			 display: inline-flex;
			 vertical-align: top;
		 }
		 .item-body{
			 flex: 1;
			 min-width: 0;
		 }
		 .item-foot{
		   // margin-left: 52upx;
		   margin-right: 24upx;
		 }
		 /deep/.u-notice-bar-wrap{
			 .u-icon-wrap{
				.u-icon__icon{
					 color: inherit!important;
				}
			 }
		 	 .u-notice-text{
		 		 color: inherit!important;
				 line-height: 1;
		 	 }
		 }
	 }
	 
	 @keyframes alarm-ani {
	 	0% {
	 		 color: #fe3b3b;
			 background-color: #f9eeee;
			 
	 	}
		50% {
			color: #fff;
			background-color: #fe3b3b;
			 
		}
	 	100% {
	 		color: #fe3b3b;
	 		background-color: #f9eeee;
	 	}
	}
	
	.monitor-mod{
		margin: 24upx;
		line-height: 1.2;
	}
	.monitor-view{
		display: flex;
		flex-wrap: wrap;
		margin-left: -24upx;
		margin-top: -24upx;
	}
	.monitor-cell{
		width: 33.33%;
		padding-top: 24upx;
		padding-left: 24upx;
	}
	.monitor-item{
		padding: 24upx 30upx;
		box-shadow: -1upx 2upx 20upx 0 rgba(6, 0, 1, 0.06);
		border-radius: 20upx;
		background-color: #fff;
		.item-head{
			
		}
		.item-body{
			margin-top: 24upx;
		}
		.item-icon{
			width: 60upx;
			height: 60upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #eff5fe;
			border-radius: 100%;
			font-size: 32upx;
			&.icon-bg-blue{
				color: #428cff;
				background-color: #eff5fe;
			}
			&.icon-bg-yellow{
				color: #f7b702;
				background-color: #fff8e4;
			}
			&.icon-bg-green{
				color: #31d3b9;
				background-color: #effbf9;
			}
		}
		.item-lab{
			color: #888;
			font-size: 24upx;
		}
		.item-num{
			font-size: 32upx;
			margin-top: 12upx;
			line-height: 1;
		}
	}
	 
</style>
